<!-- 样品认证 -->
<template>
  <div class="list-page-container custom-ant">
    <a-form layout="inline" @keyup.enter.native="handleSearch">
      <a-row :gutter="24">
        <a-col :md="6" :sm="24">
          <CompositeSearch
            :fieldList="fieldList"
            @getParams="getSearchValue"
            @adSearch="onAdSearch"
            @adClear="onAdClear"
            @tagClick="onTagClick">
            <template v-slot:ad-search-content>
              <a-form-model
                ref="adSearchFormRef"
                :model="adSearchFormData"
                layout="vertical">
                <a-row :gutter="24">
                  <a-col :span="24">
                    <a-form-model-item label="需求日期">
                      <a-date-picker v-model="adSearchFormData.demandDate" valueFormat="YYYY-MM-DD" />
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24">
                  <a-col :span="24">
                    <a-form-model-item label="是否合格">
                      <ASelectList
                        v-model="adSearchFormData.isPass"
                        :isHasDict="false"
                        :defaultOption="isPassOption"
                        placeholder="请选择供应商状态" />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form-model>
            </template>
          </CompositeSearch>
        </a-col>
        <a-col v-if="isEdit" :md="18" :sm="24">
          <div class="space-btn">
            <a-button type="primary" icon="plus" @click="onAdd">添加</a-button>
            <a-button @click="onExport">导出</a-button>
            <a-button @click="onImport">导入</a-button>
            <a-button type="danger" @click="onDelete">删除</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      bordered
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource"
      :row-selection="{ fixed: true, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :scroll="{ x: '100%', y: 300 }"
      :pagination="false">
      <span slot="date" slot-scope="text">{{ text | DateFormat }}</span>
      <template slot="isPass" slot-scope="text, record">
        <ASelectList v-if="isEdit" v-model="record.isPass" :isHasDict="false" :defaultOption="isPassOption" />
        <span v-else>{{ isPassEnum[text] || '' }}</span>
      </template>
      <template slot="actualCompletedQuantity" slot-scope="text, record">
        <a-input-number v-if="isEdit" v-model="record.actualCompletedQuantity" :min="0" />
        <span v-else>{{ text }}</span>
      </template>
      <template slot="actualCompletedData" slot-scope="text, record">
        <a-date-picker v-if="isEdit" v-model="record.actualCompletedData" valueFormat="YYYY-MM-DD" />
        <span v-else>{{ text }}</span>
      </template>
      <template slot="remark" slot-scope="text, record">
        <a-textarea v-if="isEdit" v-model="record.remark" placeholder="请输入" :rows="1" />
        <span v-else>{{ text }}</span>
      </template>
    </a-table>
    <div v-if="isEdit" class="mt-20">
      <span class="cus-text" pointer @click="onAdd"><a-icon type="plus" />新增样品</span>
    </div>
    <div class="mt-20">
      <span style="font-size: 20px;">样品附件</span><span class="ml-10">可上传20张</span>
    </div>
    <a-upload
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      :disabled="!isEdit"
      list-type="picture"
      :default-file-list="fileList"
      class="upload-list-inline"
    >
      <a-button v-if="isEdit" type="primary" class="mt-10"><a-icon type="upload" />上传图片</a-button>
    </a-upload>
  </div>
</template>

<script>
import ListPageMixin from '@/mixins/ListPageMixin.js';

export default {
  name: 'SampleCertification',
  mixins: [ ListPageMixin ],
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fieldList: [
        { name: '物料编码', field: 'field1' },
        { name: '物料名称', field: 'field2' },
        { name: '物料规格', field: 'field3' },
      ],
      adSearchFormData: {
        demandDate: null,
        isPass: '',
      },
      isPassOption: [
        { label: '否', value: '0' },
        { label: '是', value: '1' },
      ],
      isPassEnum: {
        '0': '否',
        '1': '是',
      },
      dataSource: [],
      originalDataSource: [
        {
          materielCode: 'WL20242001',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '1',
          actualCompletedQuantity: '2',
          actualCompletedData: null,
          remark: '',
        },
        {
          materielCode: 'WL20242002',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '',
          actualCompletedQuantity: '',
          actualCompletedData: null,
          remark: '',
        },
        {
          materielCode: 'WL20242003',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '',
          actualCompletedQuantity: '',
          actualCompletedData: null,
          remark: '',
        },
        {
          materielCode: 'WL20242004',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '',
          actualCompletedQuantity: '',
          actualCompletedData: null,
          remark: '',
        },
        {
          materielCode: 'WL20242005',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '',
          actualCompletedQuantity: '',
          actualCompletedData: null,
          remark: '',
        },
        {
          materielCode: 'WL20242006',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '',
          actualCompletedQuantity: '',
          actualCompletedData: null,
          remark: '',
        },
        {
          materielCode: 'WL20242007',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '',
          actualCompletedQuantity: '',
          actualCompletedData: null,
          remark: '',
        },
        {
          materielCode: 'WL20242008',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '',
          actualCompletedQuantity: '',
          actualCompletedData: null,
          remark: '',
        },
        {
          materielCode: 'WL20242009',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '',
          actualCompletedQuantity: '',
          actualCompletedData: null,
          remark: '',
        },
        {
          materielCode: 'WL20242010',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '',
          actualCompletedQuantity: '',
          actualCompletedData: null,
          remark: '',
        }
      ],
      columns: [
        { title: '序号', width: 50, customRender: (text, record, index) => `${index + 1}`, align: 'center' },
        { title: '物料编码', dataIndex: 'materielCode', width: 120, ellipsis: true },
        { title: '物料名称', dataIndex: 'materielName', width: 120, ellipsis: true },
        { title: '物料规格', dataIndex: 'materielSpecification', width: 120, ellipsis: true },
        { title: '打样要求', dataIndex: 'designDemand', width: 300, ellipsis: true },
        { title: '需求数量', dataIndex: 'demandQuantity', width: 100, ellipsis: true },
        { title: '需求日期', dataIndex: 'demandDate', width: 120, scopedSlots: { customRender: 'date' }, ellipsis: true },
        { title: '是否合格', dataIndex: 'isPass', width: 120, scopedSlots: { customRender: 'isPass' }, ellipsis: true },
        { title: '实际完成数量', dataIndex: 'actualCompletedQuantity', width: 150, scopedSlots: { customRender: 'actualCompletedQuantity' }, ellipsis: true },
        { title: '实际完成日期', dataIndex: 'actualCompletedData', width: 150, scopedSlots: { customRender: 'actualCompletedData' }, ellipsis: true },
        { title: '备注', dataIndex: 'remark', width: 300, scopedSlots: { customRender: 'remark' }, ellipsis: true },
      ],
      fileList: [
        {
          uid: '-1',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-2',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-3',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-4',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-5',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-6',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-7',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-8',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
      ],
    };
  },
  created() {
    this.handleSearch();
  },
  methods: {
    // 获取 搜索框参数
    getSearchValue(currentValue, selectFiledList) {
      console.log(currentValue, selectFiledList, 'getSearchValue');
      this.handleSearch();
    },
    // 确定搜索 高级搜索
    onAdSearch() {
      console.log(this.adSearchFormData, '确定搜索 高级搜索');
      this.handleSearch();
    },
    // 重置 高级搜索
    onAdClear() {
      console.log('重置 高级搜索');
    },
    onTagClick(data) {
      console.log(data, 'onTagClick');
      const { name } = data;
      if (['筛选组合01', '筛选组合02', '筛选组合03'].includes(name)) {
        this.adSearchFormData.isPass = '1';
        this.adSearchFormData.demandDate = null;
      } else if (['筛选组合04', '筛选组合05', '筛选组合06'].includes(name)) {
        this.adSearchFormData.isPass = '0';
        this.adSearchFormData.demandDate = null;
      } else {
        this.adSearchFormData.isPass = '1';
        this.adSearchFormData.demandDate = null;
      }
    },
    handleSearch() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.onSelectClear();
        this.dataSource = this.originalDataSource
      }, 100)
    },
    onAdd() {
      this.dataSource.push(
        {
          materielCode: 'WL20242001',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '',
          actualCompletedQuantity: '',
          actualCompletedData: null,
          remark: '',
        }
      )
    },
    onExport() {},
    onImport() {},
    onDelete() {
      if (this.selectedRowKeys.length) {
        this.$confirm({
          title: '删除',
          content: '确认删除？',
          okText: '确认',
          cancelText: '取消',
          onOk: () => {
            const newArr = [];
            this.dataSource.forEach((item, index) => {
              if (!this.selectedRowKeys.includes(index)) {
                newArr.push(item);
              }
            })
            this.dataSource = newArr;
            this.loading = true;
            setTimeout(() => {
              this.loading = false;
              this.onSelectClear();
            }, 100)
            this.$message.success(`操作成功`);
          }
        });
      } else {
        this.$message.error(`请选择数据！`);
      }
    },
  }
}
</script>

<style lang="less" scoped>
/* tile uploaded pictures */
.upload-list-inline /deep/ .ant-upload-list-item {
  float: left;
  width: 200px;
  margin-right: 8px;
}
.upload-list-inline /deep/ .ant-upload-animate-enter {
  animation-name: uploadAnimateInlineIn;
}
.upload-list-inline /deep/ .ant-upload-animate-leave {
  animation-name: uploadAnimateInlineOut;
}
</style>